<template>
  <div>
    <el-dialog
      :title="addTitle"
      :visible="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="选择栏目名称"
          prop="value"
        >
          <el-col :span="11">
            <el-select
              v-model="ruleForm.cid"
              placeholder="请选择活动区域"
            >
              <el-option
                v-for="item in options"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          label="内容标题"
          prop="title"
        >
          <el-col :span="11">
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入内容标题"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="作者"
          prop="author"
        >
          <el-col :span="11">
            <el-input
              v-model="ruleForm.author"
              placeholder="请输入作者名称"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="上传图片"
          prop="image_input"
        >
          <div
            class="upLoadPicBox"
            @click="modalPicTap('1')"
          >
            <div
              v-if="ruleForm.image_input"
              class="pictrue"
            >
              <img :src="ruleForm.image_input" />
            </div>
            <div
              v-else
              class="upLoad"
            >
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="排序"
          prop="sort"
        >
          <el-col :span="11">
            <el-input-number
              v-model="ruleForm.sort"
              :min="1"
              :max="1000"
              placeholder="请输入排序序号"
            ></el-input-number>
          </el-col>
        </el-form-item>
        <el-form-item
          label="链接地址"
          prop="url"
        >
          <el-col :span="11">
            <el-input
              v-model="ruleForm.url"
              placeholder="请输入url链接地址"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="简介:"
          prop="synopsis"
        >
          <el-col :span="11">
            <el-input
              v-model="ruleForm.synopsis"
              placeholder="请输入简介"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item
          label="是否热门"
          prop="is_hot"
        >
          <el-switch
            v-model="ruleForm.is_hot"
            :active-value="1"
            :inactive-value="0"
            active-text="显示"
            inactive-text="不显示"
          />
        </el-form-item>

        <el-form-item
          label="状态"
          prop="status"
        >
          <el-switch
            v-model="ruleForm.status"
            :active-value="1"
            :inactive-value="0"
            active-text="显示"
            inactive-text="不显示"
          />
        </el-form-item>

        <el-form-item
          label="文章内容："
          prop="content"
        >
          <ueditor-from
            v-model="ruleForm.content"
            :content="ruleForm.content"
          />
        </el-form-item>

      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancellation">取 消</el-button>
        <el-button
          type="primary"
          @click="determinate(addTitle)"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { columnList, contentCreate, contentDetail, contentUpdate } from '@/api/column'
import ueditorFrom from '@/components/ueditorFrom'

export default {
  components: {
    ueditorFrom
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    addTitle: {
      type: String,
      default: ''
    },
    upDataId: {
      type: Object,
      default: ''
    }

  },
  data() {
    return {
      ruleForm: {
        // product_id: null,
        cid: '', title: '', author: '', image_input: '', synopsis: '', sort: 0, url: '', is_hot: false, content: ''
      },
      dialogImageUrl: '',
      dialogVisibleImg: false,
      disabled: false,
      options: []
    };
  },
  watch: {
    upDataId(val, num) {
      console.log(val, 'valvalvalvalval');
      contentDetail(val.id).then(res => {
        console.log(res, 'resresresres');
        const list = res.data;
        this.ruleForm = {
          id: list.id,
          cid: list.cid,
          title: list.title,
          author: list.author,
          image_input: list.image_input,
          synopsis: list.synopsis,
          sort: list.sort,
          url: list.url,
          is_hot: list.is_hot,
          status: list.status,
          content: list.detail.content
        }
      })
    }
  },
  mounted() {
    columnList().then(res => {
      this.options = res.data.list
    })
  },
  methods: {
    // 上传图片
    modalPicTap(tit) {
      const _this = this;
      this.$modalUpload(function (img) {
        _this.ruleForm.image_input = img[0];
      }, tit);
    },
    // 上边 X
    handleClose(done) {
      this.dialogVisibleClick()
    },
    // 取消
    cancellation() {
      this.dialogVisibleClick()
    },
    // 确认
    determinate(title) {
      console.log(title);
      if (title == '添加内容') {
        console.log(this.ruleForm, '添加内容');
        contentCreate(this.ruleForm).then(async (res) => {
          if (res.status == 200) {
            this.$message.success(res.message);
            this.dialogVisibleClick()
          }
        }).catch(res => {
          this.$message.error(res.message)
        })
      } else if (title == '编辑内容') {
        console.log(this.ruleForm);
        contentUpdate(this.ruleForm).then(async (res) => {
          if (res.status == 200) {
            this.$message.success(res.message);
            this.dialogVisibleClick()
          }
        }).catch(res => {
          this.$message.error(res.message)
        })
      }
      //   this.dialogVisibleClick()
    },
    // 关闭弹框
    dialogVisibleClick() {
      this.ruleForm = {
        // product_id: null,
        cid: '', title: '', author: '', image_input: '', synopsis: '', sort: 0, url: '', is_hot: false, content: ''
      }
      console.log(this.ruleForm, 'ruleForm');
      this.$emit('dialogVisibleClick', false);
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
